<template>
  <div class="mine-wrap">
    <div class="mine-left">
      <p>个人中心</p>
      <div class="mine-tab">
        <p
          :class="{ active: index == num }"
          v-for="(item, index) in list"
          @click="tabs(index)"
        >
          {{ item.app }}
        </p>
      </div>
    </div>
    <div class="mine-right">
      <div class="tabs-left dindan-wrap" v-show="shows">
        <p>我的订单</p>
        <div class="lists-wrap" v-for="(item, index) in 5">
          <!-- 时间nav栏 -->
          <div class="dis-wrap">
            <div class="dis-wrap-timer">
              <span>2021-06-20</span>
              <span>猫眼订单号:22247919578</span>
            </div>
            <span class="el-icon-delete"></span>
          </div>
          <!-- 订单详情栏 -->
          <div class="dd-detail">
            <div>
              <img
                src="https://p0.meituan.net/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg@66w_91h_1e_1c"
                alt=""
              />
              <div>
                <span>了不起的老爸</span>
                <span>香港未来主题影院</span>
                <span>1排04座 1排05座</span>
                <span>今天 6月20日 17:50</span>
              </div>
            </div>
            <span>￥69.00</span>
            <span>待支付</span>
            <div class="btn-buy">
              <span>付款</span>
              <span>查看详情</span>
            </div>
          </div>
        </div>
      </div>
      <div class="tabs-left my-wrap" v-show="!shows">
        <p>个人信息</p>
        <div class="dis-wrap-avetit">
          <div class="heard-ava">
            <img :src="userinfo[0].avatar" alt="" v-if="avatars" />
            <!-- 头像上传 -->
            <form id="ff">
              <input type="file" name="sampleFile" id="ava-files"/>
              <span id="ava-files-upload">选择图片</span>
            </form>
            <span @click="updataAvater()">更换头像</span>

          </div>
          <div class="heard-tit">
            <div class="inputs-wrap">
              <span>昵称：</span>
              <input type="text" :value="userinfo[0].uname" v-if="avatars" disabled/>
            </div>
            <div class="inputs-wraps">
              <span>性别：</span>
              男：<input type="radio" name="sex" :value="1" v-model="gender" />
              女：<input type="radio" name="sex" :value="0" v-model="gender" />
            </div>
            <div class="inputs-wrap">
              <span>手机：</span>
              <input
                type="text"
                disabled
                :value="userinfo[0].iphone"
                v-if="avatars"
              />
            </div>
            <div class="inputs-wrap">
              <span>邮箱：</span>
              <input
                type="text"
                placeholder="填写邮箱"
                v-model="emails"
                v-if="avatars"
              />
            </div>
            <div class="inputs-wrap">
              <span>签名：</span>
              <input
                type="text"
                maxlength="30"
                placeholder="填写个性签名"
                v-if="avatars"
                v-model="qianm"
              />
            </div>
            <div class="trues-wraps">
              <span class="trues" @click="submitUpdata()">保存</span>
            </div>
            <!-- 保存成功的提示 -->
           <!--  <el-button :plain="alertshow" @click="submitUpdata()>成功</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sessionLogin from "../../http/session";
export default {
  name: "Mycenter",
  //   showGender:false,
  data() {
    return {
      qianm: "这个人很懒，什么也没写",
      qianms: "",
      list: [{ app: "我的订单" }, { app: "基本信息" }],
      num: 1,
      shows: false,
      gender: 1,
      userinfo: "",
      avatars: false,
      myavater: "",
      files:'',
      emails:'',//邮箱
      signature:'',
      alertshow:true,//消息提示框
    };
  },

  mounted() {
    //查询当前登录状态的用户信息
    this.getMyInfoSession()
  },
  components: {},
  methods: {
    // 请求当前用户的账户信息
    getMyInfoSession(){
      sessionLogin()
      .then((res) => {
        console.log(res.data.data);
        this.userinfo = res.data.data;
        this.emails = res.data.data[0].email
        this.avatars = true;
        this.gender = res.data.data[0].gender;
        this.qianm = res.data.data[0].qianming;
      })
      .catch((err) => {
        console.log(err);
      });
    },
    tabs(index) {
      this.num = index;
      if (index == 0) {
        this.shows = true;
      } else if (index == 1) {
        this.shows = false;
      }
    },

    //   头像更新
    async updataAvater() {

      // 原生方法
      // var formdata = new FormData(document.getElementById("ff"));
      // var ajax = new XMLHttpRequest();
      // let url = "http://127.0.0.1:3000/upload";
      // await ajax.open("post", url);

      // ajax.onload = function () {
      //   if (ajax.status == 200) {
      //     alert("上传成功");
      //     let avatar = JSON.parse(ajax.responseText);
      //     console.log(avatar.data);
      //     this.myavater = avatar.data;
      //     // this.updataAvas()
      //   } else {
      //     console.log("error");
      //   }
      // };
      // ajax.send(formdata);


      //改良方法 

      let formData = new FormData(document.getElementById("ff"));
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      await this.$http.post("/upload", formData, config).then(res=> {
        this.updataAvas(res.data.data)
      }).catch(err=>{
        console.log(err);
      })
    },

    // 头像上传后保存到数据库中
    async updataAvas(avatar) {
      let sess = sessionStorage.getItem("cookie-session");
      let encodedData = window.atob(sess);
      // console.log(encodedData);
      let avas = await this.$http.post("/updataAvatar", {
        uname: encodedData,
        avatar: avatar,
      });
      // 让监听器监听刷新
      this.files = true
    },

    // 用户邮箱等资料修改
    async submitUpdata(){
      // console.log(this.emails);
      // console.log(this.gender);
      // console.log(this.qianm);
      let sess = sessionStorage.getItem("cookie-session");
      let encodedData = window.atob(sess);
      let upadtaMyinfoEG =  await this.$http.post('/upadtaMyinfo',{
        uname:encodedData,
        gender:this.gender,
        email:this.emails,
        qianming:this.qianm
      })
      // console.log(upadtaMyinfoEG);
      //
      if(upadtaMyinfoEG.data.code==200){
        this.$message({
          message: upadtaMyinfoEG.data.message,
          type: 'success'
        });
      }else{
        this.$message({
          message: upadtaMyinfoEG.data.message,
          type: 'error'
        });
      }
    }
  },
  created() {
    //   this.qianm = '我是花子占爷'
  },
  watch: {
    files(news) {
      this.getMyInfoSession()
    },
  },
};
</script>

<style lang="scss" scoped>
.mine-wrap {
  margin: 110px auto 80px auto;
  width: 1000px;
  height: 800px;
  display: flex;
  .mine-left {
    width: 200px;
    height: 800px;
    background: #f4f3f4;
    border-radius: 3px;
    > p {
      text-align: center;
      margin-top: 40px;
      margin-bottom: 30px;
      font-size: 22px;
      color: #222;
      font-weight: 400;
    }
    > .mine-tab {
      text-align: center;
      color: #000;
      font-size: 18px;
      > p {
        padding: 10px;
      }
    }
  }
  .mine-right {
    border: 1px solid rgb(228, 227, 227);
    box-sizing: border-box;
    width: 800px;
    height: 800px;
    padding: 0 30px 0 30px;
    border-radius: 3px;
    overflow: scroll;
    .tabs-left {
      > p {
        font-size: 18px;
        margin: 25px 0;
        color: rgb(240, 54, 54);
        padding-bottom: 25px;
      }

      .dis-wrap-avetit {
        display: flex;
        justify-content: space-between;
      }
      .heard-ava {
        width: 280px;
        min-height: 500px;
        text-align: center;
        position: relative;
        > img {
          width: 270px;
          height: 270px;
          margin-bottom: 20px;
        }
        > span {
          font-size: 18px;
          color: #646060;
          background: #e6e6e6;
          border-radius: 10px;
          padding: 15px 35px;
          cursor: pointer;
        }
        #ava-files{
          position: absolute;
          top: 230px;
          left: 10px;
          opacity: 0;
          z-index: 2;
        }
        #ava-files-upload{
          position: absolute;
          top: 230px;
          left: 10px;
          padding: 6px 10px;
          background: orangered;
          border-radius:10px ;
          color: paleturquoise;
        }
      }
      .heard-tit {
        width: 400px;
        min-height: 500px;

        .inputs-wrap {
          margin: 30px 0;
          > span {
            color: #646060;
            font-size: 16px;
            font-weight: bold;
          }
          > input {
            box-sizing: border-box;
            padding: 0 10px;
            outline: none;
            border: none;
            border-radius: 5px;
            width: 300px;
            height: 30px;
            background: #f1f1f1;
          }
        }
        .inputs-wraps {
          color: #646060;
          font-size: 16px;
          font-weight: bold;
        }
        .trues-wraps {
          width: 400px;
          text-align: center;
          .trues {
            color: #fff;
            font-size: 20px;
            padding: 10px 25px;
            background: #eb3333;
            border-radius: 10px;
          }
        }
      }
    }
    .lists-wrap {
      margin-top: 30px;
      width: 100%;
      height: 190px;
      border: 1px solid rgb(199, 195, 195);
      .dis-wrap {
        display: flex;
        justify-content: space-between;
        background-color: #f7f7f7;
        font-size: 14px;
        padding: 16px 20px;
        .dis-wrap-timer {
          > span {
            margin-right: 20px;
            color: #8d8888;
          }
        }
      }
      .dd-detail {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div:nth-child(1) {
          display: flex;
          align-items: center;
          img {
            width: 66px;
            height: 91px;
            margin-right: 20px;
          }
          div {
            display: flex;
            flex-direction: column;
            > span {
              margin: 2px 0;
            }
            > span:nth-child(1) {
              font-size: 16px;
              font-weight: 700;
              color: #333;
            }
            > span:nth-child(2) {
              font-size: 12px;
              color: #999;
            }
            > span:nth-child(3) {
              @extend span:nth-child(2);
            }
            > span:nth-child(4) {
              font-size: 12px;
              color: #f03d37;
            }
          }
        }
        > span {
          font-size: 14px;
        }
        > .btn-buy {
          display: flex;
          flex-direction: column;
          > span:nth-child(1) {
            padding: 5px 25px;
            color: #fff;
            border-radius: 20px;
            background: rgb(240, 41, 41);
            font-size: 13px;
            /* box-shadow: 0 0 3px rgba(236, 94, 94, 0.5); */
            box-shadow: 0 0 7px rgb(240, 83, 83);
            cursor: pointer;
          }
          > span:nth-child(2) {
            margin: 5px 0;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.active {
  background: rgb(235, 51, 51);
  color: #fff !important;
}
</style>
